import loginimg from "@images/login/loginBg.3b32a4e4.png";
import styles from "@styles/login/login.module.less";

import { Form, Input, Button } from "antd";
import { UserOutlined, EyeInvisibleOutlined, EyeTwoTone, LockOutlined } from "@ant-design/icons";
import { AES } from "@utils/crypto";
import Http from "@utils/api";
import cookie from 'react-cookies';

export default function Login({ history }) {
  const layout = {
    labelCol: {
      span: 24,
    },
    wrapperCol: {
      span: 24,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 0,
      span:24,
    },
  };
  const onFinish = (values) => {
    values.userPwd = AES.Encrypt(values.userPwd); // 加密
    // values.userPwd = AES.Decrypt(values.userPwd); // 解密
    Http.getLogin(values).then(({data}) => {
      cookie.save('userInfo', data);
      history.push("/");
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.error("Failed:", errorInfo);
  };

  return (
    <article className={styles.mylogin}>
      <section className={styles.leftContainer}>
        <img src={loginimg} alt="loginimg" />
      </section>
      <section className={styles.rightContainer}>
        <aside className={styles.loginFace}>
          <h1>秦学后台管理</h1>
          <Form {...layout} initialValues={{ remember: true }} onFinish={ onFinish } onFinishFailed={ onFinishFailed } >
            <Form.Item name="userAccount" rules={[{  required: true,  message: "请输入您的账号!"}]}>
              <Input prefix={<UserOutlined />} placeholder="账号" />
            </Form.Item>
            <Form.Item
              name="userPwd"
              rules={[ { required: true, message: "请输入您的密码!" } ]}>
              <Input.Password prefix={<LockOutlined />} placeholder="密码" iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} />
            </Form.Item>
            <Form.Item {...tailLayout} className={styles.submit}>
              <Button type="primary" htmlType="submit" block> 登录 </Button>
            </Form.Item>
          </Form>
          <p>使用手机小程序提示的账号密码登录</p>
        </aside>
      </section>
    </article>
  );
}
